import React, { Component } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import {
  Card,
  Row,
  Col,
  notification,
  Button,
  Dropdown,
  Icon,
  Menu,
  Table,
  Badge,
  Avatar,
  List,
} from 'antd';
import ButtonGroup from 'antd/lib/button/button-group';
import styles from './TeacherDetail.less';

import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

const status = ['离职', '出差中', '在校'];
// 职称
const academicTitles = {
  assistant: '助教',
  lecture: '讲师',
  adjunctProfessor: '副教授',
  professor: '教授',
};
// 学位
const academicDegrees = { doctor: '博士', postDoctor: '博士后' };
// 所属教学单位
const departments = {
  ch: '测绘中心实验室',
  yg: '遥感科学与技术系',
  zh: '资源环境与城乡规划管理系',
  cx: '土地资源管理系',
  dx: '测量工程系',
  tg: '地理信息科学系',
};

// 操作日志
const operationTabList = [
  {
    key: 'tab1',
    tab: '操作日志一',
  },
  {
    key: 'tab2',
    tab: '操作日志二',
  },
  {
    key: 'tab3',
    tab: '操作日志三',
  },
];

@connect(({ teachers, loading }) => ({
  teachers,
  loading: loading.effects['teachers/fetchById'],
}))
class TeacherDetail extends Component {
  state = {
    operationkey: 'tab1',
  };

  columns = [
    {
      title: '操作类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '操作人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '执行结果',
      dataIndex: 'status',
      key: 'status',
      render: text =>
        text === 'agree' ? (
          <Badge status="success" text="成功" />
        ) : (
          <Badge status="error" text="驳回" />
        ),
    },
    {
      title: '操作时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '备注',
      dataIndex: 'memo',
      key: 'memo',
    },
  ];

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;

    dispatch({
      type: 'teachers/fetchById',
      payload: params.id || '0',
    });
  }

  previewNotice = () => {
    // TODO:
    // TODO: 该做学生管理了
    // 还有流程没做 。。。。
    // 权限
    notification.open({
      message: '跳转',
      description: '跳转到 notice 列表页',
    });
  };

  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  render() {
    const {
      teachers: { profile = {} },
      loading,
    } = this.props;

    const { operationkey } = this.state;

    const description = (
      <DescriptionList className={styles.headerList} size="small" col="2">
        <Description term="姓名">{profile.name}</Description>
        <Description term="性别">{profile.sex}</Description>
        <Description term="籍贯">{profile.nativePlace}</Description>
        <Description term="婚否">{profile.married ? '已婚' : '未婚'}</Description>
        <Description term="出生年月">{profile.birthDate}</Description>
        <Description term="政治面貌">{profile.politicalOutlook}</Description>
      </DescriptionList>
    );

    const extra = (
      <Row>
        <Col xs={24} sm={12}>
          <div className={styles.textSecondary}>状态</div>
          <div className={styles.heading}>{status[profile.status]}</div>
        </Col>
        <Col xs={24} sm={12}>
          <div className={styles.textSecondary}>代办事项</div>
          <a className={styles.heading} onClick={() => this.previewNotice()}>
            {profile.todoListCount}
          </a>
        </Col>
      </Row>
    );

    const menu = (
      <Menu>
        <Menu.Item key="1">选项一</Menu.Item>
        <Menu.Item key="2">选项二</Menu.Item>
        <Menu.Item key="3">选项三</Menu.Item>
      </Menu>
    );

    const action = (
      <>
        <ButtonGroup>
          <Button>更新</Button>
          <Button>删除</Button>
          <Dropdown overlay={menu} placement="bottomRight">
            <Button>
              <Icon type="ellipsis" />
            </Button>
          </Dropdown>
        </ButtonGroup>

        <Button type="primary">主操作</Button>
      </>
    );

    const IconText = ({ text, type }) => (
      <>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </>
    );

    return (
      <PageHeaderWrapper
        title={`教职工号：${profile.id}`}
        logo={<img alt="" src={profile.avatar} />}
        loading={loading}
        extra={action}
        content={description}
        extraContent={extra}
      >
        <Card title="基本信息" style={{ marginBottom: 24 }} bordered={false}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="教学单位">{departments[profile.department]}</Description>
            <Description term="职称">{academicTitles[profile.academicTitle]}</Description>
            <Description term="学位">{academicDegrees[profile.academicDegree]}</Description>
            <Description term="机构/部门">{profile.post}</Description>
            <Description term="联系电话">{profile.contactNumber}</Description>
            <Description term="邮箱">{profile.email}</Description>
          </DescriptionList>

          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="本科毕业院校">{profile.undergraduateCollege}</Description>
            <Description term="研究生毕业院校">{profile.masterCollege}</Description>
            <Description term="博士毕业院校">{profile.doctoralCollege}</Description>
            <Description term="通讯地址">{profile.postalAddress}</Description>
            <Description term="研究方向">{profile.researchDirection}</Description>
            <Description term="科研平台">{profile.researchPlatform}</Description>
          </DescriptionList>
        </Card>

        <Card title="论文&期刊" style={{ marginBottom: 24 }} bordered={false}>
          <List
            itemLayout="vertical"
            size="large"
            pagination={{
              pageSize: 4,
            }}
            dataSource={profile.papers}
            renderItem={item => (
              <List.Item
                key={item.title}
                actions={[
                  <IconText type="star-o" text="156" />,
                  <IconText type="like-o" text="156" />,
                  <IconText type="message" text="2" />,
                ]}
                extra={<img height={180} alt="logo" src={item.logo} />}
                style={{ paddingBottom: 28 }}
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={<a href="/">{item.title}</a>}
                  description={item.description}
                />
                <p style={{ marginBottom: 30 }}>{item.content}</p>
              </List.Item>
            )}
          />
        </Card>
        <Card
          className={styles.tabsCard}
          bordered={false}
          tabList={operationTabList}
          onTabChange={this.onOperationTabChange}
        >
          {profile.operations ? (
            <Table
              pagination={false}
              loading={loading}
              dataSource={profile.operations[operationkey]}
              columns={this.columns}
            />
          ) : null}
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TeacherDetail;
